

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>我的客户</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">客户名称：</label>
            <!--
            	客户名称查询条件
            -->
            <div class="layui-input-inline">
              <input type="text" name="clientname" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">电话号码：</label>
            <!--
            	电话号码查询条件
            -->
            <div class="layui-input-inline">
              <input type="text" name="clientphone" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">指派状态：</label>
            <div class="layui-input-inline">
							<select id="clientassign">
								<option vlaue="null">请选择</option>
	            	<option value="是">是</option>
	            	<option value="否">否</option>
            	</select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">客户类型：</label>
            <div class="layui-input-inline">
              <select id="clienttype" lay-verify="required">
                <option value="0">请选择类型</option>
              </select>
            </div>
          </div>
          <!--
          	查询按钮
          -->
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="layui-card-body">
        <table id="clients" lay-filter="test"></table> 
        <script type="text/html" id="ahref">
          <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">修改</a>
        </script>
      </div>
    </div>
  </div>
  <script src="../../../layuiadmin/layui/layui.js"></script>
  <script src="../../../layuiadmin/jquery/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  	
  $(function(){
  	layui.use('form', function(){
        var form = layui.form; 
        form.render();
     
   });
  	layui.use('table', function(){
  		var table = layui.table;
  	
		  //第一个实例
		  table.render({
		    elem: '#clients'
		    ,height: 355
		    ,url: 'http://localhost:8080/client/mylistclientall' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		    	{field: 'clientId', title: 'ID', width:'11%', sort: true, fixed: 'left'}
		      ,{field: 'clientName', title: '客户(委托人)', width:'13%'}
		      ,{field: 'clientPhone', title: '联系电话', width:'16%'}
		      ,{field: 'clientRegion', title: '地区', width:'16%'} 
		      ,{field: 'clientAssign', title: '是否指派', width: '16%'}
		      ,{field: 'clientSave', title: '入库时间', width:'16%', sort: true}
		      ,{title: '操作', fixed: 'right', width: '11%', align:'center' ,toolbar: '#ahref' }
		    ]],
		    id:"clientall"
		  });
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                parentData = data;
                if(layEvent === 'detail'){
                    layer.open({
                        type: 2,
                        skin: 'layui-layer-lan',
                        anim: 4,
                        title: ['客户详细信息', 'font-size:18px;'],
                        offset: '10px',
                        area: ['800px', '800px'],
                        content:'amend.html',
                    });
                }
            });
		var $ = layui.$, active = {
                reload: function(){
                    //执行重载
                    table.reload('clientall', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            clientName:$('#clientname').val(),
                            clientPhone:$('#clientphone').val(),
                            clientRegion:$('#clientregion').val(),
                            clientAssign:$('#clientassign').val(),
                        }
                    });
                }
            };
            
		});
		$.ajax({
    	type:"post",
    	url:"http://localhost:8080/client/liststateall",
    	async:false,
    	success:function(date){
    		for(var i=0;i<date.length;i++){
    			var option = new Option(date[i].stateName,date[i].stateId);
					$("#clienttype").append(option);
    		}
    	}
    });
  });
		
  </script>
</body>
</html>
